<template>
  <div>
    <a-modal
      title="授权数据"
      :width="600"
      centered
      :maskClosable="false"
      :destroyOnClose="true"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleSubmit"
      @cancel="handleCancel"
    >
      <a-spin :spinning="formLoading">
        <a-form :model="form" ref="formRef">
          <a-form-item label="授权范围" :labelCol="labelCol" :wrapperCol="wrapperCol"
          :rules="{ required: true, message: '请选择授权范围！', type: 'array' }">
            <a-select
                placeholder="请选择授权范围"
                v-model:value="form.dataScopeType"
            >
                <a-select-option
                v-for="(item, index) in dataScopeTypeData"
                :key="index"
                :value="item.code"
                :title="item.code"
                >{{ item.value }}</a-select-option
                >
            </a-select>
          </a-form-item>
        </a-form>
      </a-spin>
    </a-modal>
  </div>
</template>

<script lang='ts'>
import { defineComponent, PropType, reactive, toRefs, ref, computed, watch, onMounted } from 'vue'
import { sysRoleGrantData } from '@/api/system/role'
import { sysDictTypeDropDown } from '@/api/system/dict'
import { useRouter } from 'vue-router'
import { useStore } from '@/store'
import { message } from 'ant-design-vue'
export default defineComponent({
  name: 'userOrgForm',
  components: {},
  props: {
    treeData: {
      type: Array,
      default: []
    }
  },
  emits: ['refresh'],

  setup(props, ctx) {
    const router = useRouter()
    const store = useStore()
    const state = reactive({
      labelCol: {
        style: { 'padding-right': '20px' },
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      expandedKeys: [],
      visible: false,
      confirmLoading: false,
      formLoading: true,
      autoExpandParent: true,
      checkedKeys: [],
      form: {
        id: '',
        dataScopeType: ''
      },
      dataScopeTypeData: [] as any,
      replaceFields: {
        key: 'id'
      }
    })
    onMounted(() => {})
    // 初始化方法
    function init(record) {
      // 清空已选择的
      state.checkedKeys = []
      state.form.id = record.id
      state.form.dataScopeType = record.dataScopeType + ""
      state.visible = true
      // 已关联数据

      sysDictTypeDropDown({ code: 'data_scope_type' }).then(res => {
        state.dataScopeTypeData = res
        state.formLoading = false
      })
      
    }

    function onExpand(expandedKeys) {
      state.expandedKeys = expandedKeys
      state.autoExpandParent = false
    }
    function onCheck(checkedKeys) {
      state.checkedKeys = checkedKeys
    }

    function handleSubmit() {
      state.confirmLoading = true
      sysRoleGrantData({ id: state.form.id, dataScopeType: state.form.dataScopeType, grantOrgIdList:[] }).then(
        (res) => {
          message.success('授权成功')
          state.confirmLoading = false
          state.visible = false
          ctx.emit('refresh')
        }
      )
    }
    function handleCancel() {
      // 清空已选择的
      state.checkedKeys = []
      state.visible = false
    }
    return {
      ...toRefs(state),
      init,
      onExpand,
      onCheck,
      handleCancel,
      handleSubmit
    }
  }
})
</script>

<style lang='scss' scoped>
</style>